
<!DOCTYPE html>
<html>
<head>
	<title>链接校验</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}
		th, td {
			text-align: left;
			padding: 8px;
			border: 1px solid black;
		}
		th {
			background-color: #ddd;
		}
		a {
			color: black;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>链接校验</h1>
	<p>请输入文本：</p>
	<textarea id="text" rows="10" cols="50" maxlength="1000"></textarea>
	<br>
	<button onclick="checkLinks()">校验链接</button>
	<p id="status"></p>
	<div id="table"></div>
	<script>
	var allUrls = [];

	function extractUrls(text) {
		var urls = [];
		var pattern = /(?:https?|ftp):\/\/[\n\S]+/g;
		var match;
		while (match = pattern.exec(text)) {
			urls.push(match[0]);
		}
		return urls;
	}

	function checkLinks() {
		var text = document.getElementById("text").value.trim();
		if (text.length == 0) {
			alert("请输入文本!");
			return;
		}
		if (text.length > 1000) {
			alert("文本长度不能超过1000个字符!");
			return;
		}
		var urls = extractUrls(text);
		if (urls.length == 0) {
			alert("文本中没有包含任何链接!");
			return;
		}
		var validUrls = [];
		var invalidUrls = [];
		for (var i = 0; i < urls.length; i++) {
			if (allUrls.indexOf(urls[i]) == -1) {
				allUrls.push(urls[i]);
				fetch(urls[i], {method: "HEAD"}).then(function(response) {
					if (response.ok) {
						validUrls.push(response.url);
					} else {
						invalidUrls.push(response.url);
					}
				}).catch(function(error) {
					console.error(error);
				}).finally(function() {
					if (validUrls.length + invalidUrls.length == urls.length) {
						var table = "<table><tr><th>序号</th><th>链接地址</th><th>是否可用</th></tr>";
						var count = 0;
						var urls = validUrls.concat(invalidUrls);
						for (var i = 0; i < urls.length; i++) {
							count++;
							var status = (validUrls.indexOf(urls[i]) != -1) ? "可用" : "不可用";
							var row = "<tr><td>" + count + "</td><td><a href='" + urls[i] + "' target='_blank'>" + urls[i] + "</a></td><td>" + status + "</td></tr>";
							table += row;
						}
						table += "</table>";
						document.getElementById("table").innerHTML = table;
						document.getElementById("status").innerHTML = "共识别 " + urls.length + " 个链接，其中 " + validUrls.length + " 个可用，" + invalidUrls.length + " 个不可用。";
					}
				});
			}
		}
	}

	window.onload = function() {
		var text = document.getElementById("text");
		text.addEventListener("input", function() {
			allUrls = [];
			document.getElementById("table").innerHTML = "";
			document.getElementById("status").innerHTML = "";
		});
	};
	</script>
</body>
</html>

<!-- 解释：

1. 首先定义了一个`allUrls`数组来储存所有已经校验过的链接，以避免重复校验。
2. `extractUrls`函数用正则表达式来提取文本中的链接，返回一个链接数组。
3. `checkLinks`函数首先获取文本框中的文本，进行长度和是否包含链接的校验。然后遍历链接数组，对于每个链接，如果之前没有校验过，则发送一个HEAD请求，根据响应状态码判断链接是否可用。最终将所有链接的校验结果以表格形式输出，并更新`allUrls`数组。
4. 在页面加载完成后，为文本框添加一个input事件监听器，在文本改变时清空之前的校验结果和`allUrls`数组。
5. CSS样式定义了表格 -->